<template>
    <!-- pages/setStoreInfo/setStoreInfo.wxml -->
    <view class="container" :style="isIpx ? 'padding-bottom:168rpx' : 'padding-bottom:120rpx'">
        <view class="form">
            <van-cell-group>
                <van-field v-model="storeName" placeholder="请输入门店名称" label="门店名称" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="cityName" placeholder="请输入所在城市" :border="false" label="所在城市" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="address" autosize type="textarea" placeholder="请输入详细地址" :border="false" label="详细地址" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="lat" placeholder="请输入经度" :border="false" label="经度" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="lon" placeholder="请输入纬度" :border="false" label="纬度" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="kefuPhone" placeholder="请输入" :border="false" label="客服电话" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="wifiInfo" placeholder="请输入" :border="false" label="WIFI名称" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="wifiPwd" placeholder="请输入" :border="false" label="WIFI密码" />
            </van-cell-group>
            <van-cell-group>
                <van-cell center title="显示通宵价格">
                    <switch :checked="showTxPrice" data-tag="showTxPrice" @change="onChangeSwitch" />
                </van-cell>
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="txStartHour" placeholder="请输入18-23的数字,默认23" :border="false" label="通宵开始小时" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="txHour" placeholder="请输入8-12的数字,默认8" :border="false" label="通宵时长(时)" />
            </van-cell-group>
            <van-cell-group>
                <van-cell center title="延时5分钟灯光">
                    <switch :checked="delayLight" data-tag="delayLight" @change="onChangeSwitch" />
                </van-cell>
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="clearTime" placeholder="请输入5-30的数字,默认5" :border="false" label="清洁时间(分)" />
            </van-cell-group>
            <van-cell-group>
                <van-cell center title="待清洁允许预订">
                    <switch :checked="clearOpen" data-tag="clearOpen" @change="onChangeSwitch" />
                </van-cell>
            </van-cell-group>
            <van-cell-group>
                <van-cell center title="消费中门禁常开">
                    <switch :checked="orderDoorOpen" data-tag="orderDoorOpen" @change="onChangeSwitch" />
                </van-cell>
            </van-cell-group>

            <van-cell-group>
                <van-cell center title="保洁员任意开门">
                    <switch :checked="clearOpenDoor" data-tag="clearOpenDoor" @change="onChangeSwitch" />
                </van-cell>
            </van-cell-group>

            <van-cell-group>
                <van-field v-model="notice" autosize type="textarea" maxlength="2000" placeholder="请输入" :border="false" label="门店公告" />
            </van-cell-group>
            <view class="line" v-if="qrCode">
                <label>门店小程序码</label>
                <view class="right">
                    <image style="width: 200rpx; height: 200rpx" :data-src="qrCode" :src="qrCode" @tap="previewImage"></image>
                </view>
            </view>
            <view class="line">
                <label>门店列表图</label>
                <view class="right">
                    <van-uploader
                        :file-list="fileList1"
                        @after-read="afterRead($event, { info: '1' })"
                        data-info="1"
                        @delete="deleteFun($event, { info: '1' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                    />
                </view>
            </view>
            <view class="line">
                <label>门店顶部轮播图</label>
                <view class="right">
                    <van-uploader
                        class="img"
                        :file-list="fileList2"
                        @after-read="afterRead($event, { info: '2' })"
                        data-info="2"
                        @delete="deleteFun($event, { info: '2' })"
                        max-count="9"
                        image-fit="aspectFit"
                        preview-size="200rpx"
                    />
                </view>
            </view>
            <van-cell-group>
                <van-cell center title="门店首页简洁模式">
                    <switch :checked="simpleModel" data-tag="simpleModel" @change="onChangeSimpleModel" />
                </van-cell>
            </van-cell-group>
            <view class="line" v-if="!simpleModel">
                <label>首页按钮图</label>
                <view class="right">
                    <view>
                        <van-uploader
                            :file-list="btnfileList"
                            @after-read="afterRead($event, { info: '10' })"
                            data-info="10"
                            @delete="deleteFun($event, { info: '10' })"
                            preview-size="200rpx"
                            max-count="1"
                            image-fit="aspectFit"
                            upload-text="立即预约按钮图"
                        />
                    </view>
                    <van-uploader
                        :file-list="qhfileList"
                        @after-read="afterRead($event, { info: '11' })"
                        data-info="11"
                        @delete="deleteFun($event, { info: '11' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="切换门店按钮图"
                    />
                    <van-uploader
                        :file-list="tgfileList"
                        @after-read="afterRead($event, { info: '12' })"
                        data-info="12"
                        @delete="deleteFun($event, { info: '12' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="团购兑换按钮图"
                    />
                    <van-uploader
                        :file-list="czfileList"
                        @after-read="afterRead($event, { info: '13' })"
                        data-info="13"
                        @delete="deleteFun($event, { info: '13' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="会员充值按钮图"
                    />
                    <van-uploader
                        :file-list="openfileList"
                        @after-read="afterRead($event, { info: '14' })"
                        data-info="14"
                        @delete="deleteFun($event, { info: '14' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="一键开门按钮图"
                    />
                    <van-uploader
                        :file-list="wififileList"
                        @after-read="afterRead($event, { info: '15' })"
                        data-info="15"
                        @delete="deleteFun($event, { info: '15' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="WIFI信息按钮图"
                    />
                    <van-uploader
                        :file-list="kffileList"
                        @after-read="afterRead($event, { info: '16' })"
                        data-info="16"
                        @delete="deleteFun($event, { info: '16' })"
                        preview-size="200rpx"
                        max-count="1"
                        image-fit="aspectFit"
                        upload-text="联系客服按钮图"
                    />
                </view>
            </view>
            <view class="line" v-if="!simpleModel">
                <label>门店环境</label>
                <view class="right">
                    <van-uploader
                        class="img"
                        :file-list="fileList3"
                        @after-read="afterRead($event, { info: '3' })"
                        data-info="3"
                        @delete="deleteFun($event, { info: '3' })"
                        max-count="9"
                        preview-size="200rpx"
                    />
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view :class="'submit ' + (isIpx ? 'fix-iphonex-button' : '')">
            <button hover-class="button-click" class="border-primary color-primary cancel" @tap="cancel">取消</button>
            <button hover-class="button-click" class="bg-primary" @tap="submit">保存</button>
        </view>
    </view>
</template>

<script>
// pages/setStoreInfo/setStoreInfo.js
const app = getApp();
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
export default {
    data() {
        return {
            fileList1: [],
            fileList2: [],
            fileList3: [],
            btnfileList: [],
            tgfileList: [],
            openfileList: [],
            wififileList: [],
            kffileList: [],
            czfileList: [],
            qhfileList: [],
            storeId: '',
            storeName: '',
            cityName: '',
            address: '',
            wifiInfo: '',
            wifiPwd: '',
            simpleModel: true,
            kefuPhone: '',
            notice: '',
            headImg: '',
            btnImg: '',
            storeEnvImg: '',
            lat: '',
            lon: '',
            clearTime: '',
            clearOpen: '',
            qrCode: '',
            index: '',
            showTxPrice: '',
            txStartHour: '',
            delayLight: '',
            orderDoorOpen: '',
            clearOpenDoor: '',
            txHour: '',
            citylist: [],
            //城市列表
            ritem: [
                {
                    value: true,
                    name: '是',
                    checked: 'true'
                },
                {
                    value: 'false',
                    name: '否'
                }
            ],
            isIpx: app.globalData.isIpx ? true : false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        if (options.storeId) {
            this.setData({
                storeId: Number(options.storeId)
            });
            this.getData();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 获取详情
        getData: function () {
            let that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/store/getDetail/' + that.storeId,
                    '1',
                    'get',
                    {
                        storeId: that.storeId
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            that.citylist.map((it, index) => {
                                if (it == info.data.cityName) {
                                    that.setData({
                                        index: index
                                    });
                                }
                            });
                            let fileList1 = [
                                {
                                    url: info.data.headImg
                                }
                            ];
                            // let fileList4 = []
                            // fileList4.push(info.data.btnImg);
                            let fileList2 = [];
                            if (null != info.data.bannerImg) {
                                let arr = info.data.bannerImg.split(',');
                                arr.map((it) => {
                                    fileList2.push({
                                        url: it
                                    });
                                });
                            }
                            let fileList3 = [];
                            if (info.data.storeEnvImg) {
                                let arr2 = info.data.storeEnvImg.split(',');
                                arr2.map((it) => {
                                    fileList3.push({
                                        url: it
                                    });
                                });
                            }
                            let btnfileList = [];
                            if (info.data.btnImg) {
                                btnfileList = [
                                    {
                                        url: info.data.btnImg
                                    }
                                ];
                            }
                            let qhfileList = [];
                            if (info.data.qhImg) {
                                qhfileList = [
                                    {
                                        url: info.data.qhImg
                                    }
                                ];
                            }
                            let tgfileList = [];
                            if (info.data.tgImg) {
                                tgfileList = [
                                    {
                                        url: info.data.tgImg
                                    }
                                ];
                            }
                            let openfileList = [];
                            if (info.data.openImg) {
                                openfileList = [
                                    {
                                        url: info.data.openImg
                                    }
                                ];
                            }
                            let czfileList = [];
                            if (info.data.czImg) {
                                czfileList = [
                                    {
                                        url: info.data.czImg
                                    }
                                ];
                            }
                            let wififileList = [];
                            if (info.data.wifiImg) {
                                wififileList = [
                                    {
                                        url: info.data.wifiImg
                                    }
                                ];
                            }
                            let kffileList = [];
                            if (info.data.kfImg) {
                                kffileList = [
                                    {
                                        url: info.data.kfImg
                                    }
                                ];
                            }
                            that.setData({
                                storeId: info.data.storeId,
                                storeName: info.data.storeName,
                                cityName: info.data.cityName,
                                address: info.data.address,
                                wifiInfo: info.data.wifiInfo,
                                wifiPwd: info.data.wifiPwd,
                                simpleModel: info.data.simpleModel,
                                kefuPhone: info.data.kefuPhone,
                                notice: info.data.notice,
                                fileList1: fileList1,
                                fileList2: fileList2,
                                fileList3: fileList3,
                                btnfileList: btnfileList,
                                qhfileList: qhfileList,
                                tgfileList: tgfileList,
                                openfileList: openfileList,
                                czfileList: czfileList,
                                wififileList: wififileList,
                                kffileList: kffileList,
                                lat: info.data.lat,
                                lon: info.data.lon,
                                clearTime: info.data.clearTime,
                                clearOpen: info.data.clearOpen,
                                qrCode: info.data.qrCode,
                                showTxPrice: info.data.showTxPrice,
                                txStartHour: info.data.txStartHour,
                                delayLight: info.data.delayLight,
                                txHour: info.data.txHour,
                                orderDoorOpen: info.data.orderDoorOpen,
                                clearOpenDoor: info.data.clearOpenDoor
                            });
                        } else {
                            uni.showModal({
                                content: '请求服务异常，请稍后重试',
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 定位
        onClickLocation() {
            this.goLocation();
        },

        goLocation() {
            // 获取用户经纬度
            var that = this;
            uni.getLocation({
                type: 'gcj02',
                success(res) {
                    //console.log(res)
                    that.setData({
                        lat: res.latitude,
                        lon: res.longitude
                    });
                },
                fail(err) {
                    //console.log(err)
                }
            });
        },

        // 图片上传
        afterRead(event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            //console.log(event)
            let that = this;
            let type = event.currentTarget.dataset.info;
            const { file } = event.detail;
            //console.log(file)
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            uni.uploadFile({
                url: app.globalData.baseUrl + '/member/store/uploadImg',
                filePath: file.url,
                name: 'file',
                header: {
                    'tenant-id': app.globalData.tenantId,
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + app.globalData.userDatatoken.accessToken
                },
                success(res) {
                    //console.log(res)
                    var data = JSON.parse(res.data);
                    // 上传完成需要更新 fileList
                    if (type == '1') {
                        const { fileList1 = [] } = that;
                        fileList1.push({
                            url: data.data
                        });
                        that.setData({
                            fileList1: fileList1
                        });
                    } else if (type == '2') {
                        const { fileList2 = [] } = that;
                        fileList2.push({
                            url: data.data
                        });
                        that.setData({
                            fileList2: fileList2
                        });
                    } else if (type == '3') {
                        const { fileList3 = [] } = that;
                        fileList3.push({
                            url: data.data
                        });
                        that.setData({
                            fileList3: fileList3
                        });
                    } else if (type == '10') {
                        const { btnfileList = [] } = that;
                        btnfileList.push({
                            url: data.data
                        });
                        that.setData({
                            btnfileList: btnfileList
                        });
                    } else if (type == '11') {
                        const { qhfileList = [] } = that;
                        qhfileList.push({
                            url: data.data
                        });
                        that.setData({
                            qhfileList: qhfileList
                        });
                    } else if (type == '12') {
                        const { tgfileList = [] } = that;
                        tgfileList.push({
                            url: data.data
                        });
                        that.setData({
                            tgfileList: tgfileList
                        });
                    } else if (type == '13') {
                        const { czfileList = [] } = that;
                        czfileList.push({
                            url: data.data
                        });
                        that.setData({
                            czfileList: czfileList
                        });
                    } else if (type == '14') {
                        const { openfileList = [] } = that;
                        openfileList.push({
                            url: data.data
                        });
                        that.setData({
                            openfileList: openfileList
                        });
                    } else if (type == '15') {
                        const { wififileList = [] } = that;
                        wififileList.push({
                            url: data.data
                        });
                        that.setData({
                            wififileList: wififileList
                        });
                    } else if (type == '16') {
                        const { kffileList = [] } = that;
                        kffileList.push({
                            url: data.data
                        });
                        that.setData({
                            kffileList: kffileList
                        });
                    }
                }
            });
        },

        deleteFun(event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            let type = event.currentTarget.dataset.info;
            let index = event.detail.index;
            if (type == '1') {
                const { fileList1 = [] } = this;
                fileList1.splice(index, 1);
                this.setData({
                    fileList1
                });
            } else if (type == '2') {
                const { fileList2 = [] } = this;
                fileList2.splice(index, 1);
                this.setData({
                    fileList2
                });
            } else if (type == '3') {
                const { fileList3 = [] } = this;
                fileList3.splice(index, 1);
                this.setData({
                    fileList3
                });
            } else if (type == '10') {
                const { btnfileList = [] } = this;
                btnfileList.splice(index, 1);
                this.setData({
                    btnfileList
                });
            } else if (type == '11') {
                const { qhfileList = [] } = this;
                qhfileList.splice(index, 1);
                this.setData({
                    qhfileList
                });
            } else if (type == '12') {
                const { tgfileList = [] } = this;
                tgfileList.splice(index, 1);
                this.setData({
                    tgfileList
                });
            } else if (type == '13') {
                const { czfileList = [] } = this;
                czfileList.splice(index, 1);
                this.setData({
                    czfileList
                });
            } else if (type == '14') {
                const { openfileList = [] } = this;
                openfileList.splice(index, 1);
                this.setData({
                    openfileList
                });
            } else if (type == '15') {
                const { wififileList = [] } = this;
                wififileList.splice(index, 1);
                this.setData({
                    wififileList
                });
            } else if (type == '16') {
                const { kffileList = [] } = this;
                kffileList.splice(index, 1);
                this.setData({
                    kffileList
                });
            }
        },

        // 取消
        cancel: function () {
            uni.navigateBack();
        },

        previewImage(e) {
            var currentUrl = e.currentTarget.dataset.src; //获取当前点击图片链接
            uni.previewImage({
                urls: [currentUrl]
            });
        },

        onChangeSwitch(e) {
            const { target: { dataset = {} } = {}, detail } = e;
            this.setData({
                [dataset.tag]: detail.value
            });
        },

        onChangeSimpleModel(e) {
            const { target: { dataset = {} } = {}, detail } = e;
            this.setData({
                [dataset.tag]: detail.value
            });
        },

        // 保存
        submit: function () {
            let that = this;
            //校验参数
            if (
                this.storeName &&
                this.cityName &&
                this.address &&
                this.lon &&
                this.lat &&
                this.wifiInfo &&
                this.wifiPwd &&
                this.kefuPhone &&
                this.txStartHour &&
                this.txHour &&
                this.clearTime &&
                this.notice &&
                this.fileList1.length &&
                this.fileList2.length
            ) {
            } else {
                uni.showToast({
                    title: '请填写完整',
                    icon: 'none'
                });
                return;
            }
            let imgs = [];
            let bannerImgs = [];
            that.fileList2.map((it) => {
                bannerImgs.push(it.url);
            });
            that.fileList3.map((it) => {
                imgs.push(it.url);
            });
            let params = {};
            if (this.simpleModel) {
                //简洁模式
                params = {
                    storeId: that.storeId,
                    storeName: that.storeName,
                    cityName: that.cityName,
                    headImg: that.fileList1[0].url,
                    bannerImg: bannerImgs.join(','),
                    notice: that.notice,
                    address: that.address,
                    wifiInfo: that.wifiInfo,
                    wifiPwd: that.wifiPwd,
                    simpleModel: that.simpleModel,
                    kefuPhone: that.kefuPhone,
                    lat: that.lat,
                    lon: that.lon,
                    clearTime: that.clearTime,
                    clearOpen: that.clearOpen,
                    showTxPrice: that.showTxPrice,
                    txStartHour: that.txStartHour,
                    delayLight: that.delayLight,
                    txHour: that.txHour,
                    orderDoorOpen: that.orderDoorOpen,
                    clearOpenDoor: that.clearOpenDoor
                };
            } else {
                //个性化模式 需要上传那些模板图片
                if (
                    this.fileList3.length &&
                    this.btnfileList.length &&
                    this.qhfileList.length &&
                    this.tgfileList.length &&
                    this.czfileList.length &&
                    this.openfileList.length &&
                    this.wififileList.length &&
                    this.kffileList.length
                ) {
                    params = {
                        storeId: that.storeId,
                        storeName: that.storeName,
                        cityName: that.cityName,
                        headImg: that.fileList1[0].url,
                        btnImg: that.btnfileList[0].url,
                        qhImg: that.qhfileList[0].url,
                        tgImg: that.tgfileList[0].url,
                        czImg: that.czfileList[0].url,
                        openImg: that.openfileList[0].url,
                        wifiImg: that.wififileList[0].url,
                        kfImg: that.kffileList[0].url,
                        storeEnvImg: imgs.join(','),
                        bannerImg: bannerImgs.join(','),
                        notice: that.notice,
                        address: that.address,
                        wifiInfo: that.wifiInfo,
                        wifiPwd: that.wifiPwd,
                        simpleModel: that.simpleModel,
                        kefuPhone: that.kefuPhone,
                        lat: that.lat,
                        lon: that.lon,
                        clearTime: that.clearTime,
                        clearOpen: that.clearOpen,
                        showTxPrice: that.showTxPrice,
                        txStartHour: that.txStartHour,
                        delayLight: that.delayLight,
                        txHour: that.txHour,
                        orderDoorOpen: that.orderDoorOpen,
                        clearOpenDoor: that.clearOpenDoor
                    };
                } else {
                    uni.showToast({
                        title: '请填写完整',
                        icon: 'none'
                    });
                    return;
                }
            }
            console.log('提交保存门店信息');
            if (app.globalData.isLogin) {
                http.request(
                    '/member/store/save',
                    '1',
                    'post',
                    params,
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            uni.showToast({
                                title: '设置成功',
                                icon: 'success'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1000);
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        }
    }
};
</script>
<style>
@import './setStoreInfo.css';
</style>
